<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外网-高级搜索</title>
    <!-- 日期 -->
    <link rel="stylesheet" type="text/css" href="src/css/foundation.min.css">
    <link rel="stylesheet" type="text/css" href="src/css/foundation-datepicker.css">
    <!-- 主体 -->
    <link rel="stylesheet" type="text/css" href="src/css/reset.css">
    <link rel="stylesheet" type="text/css" href="src/css/hignSearch.css">

    <script src="src/js/jquery-1.11.3.min.js"></script>
</head>
<body>
    <!-- 搜索结果 -->
    <div class="highSearch-wrap">
        <div class="banxin">
        	<!-- 站内导航 -->
            <div class="list-header">
                <img src="src/images/mark.png" alt="" class="list-header-mark">
                <span class="list-header-title">天津港口统一收费服务平台</span>
                <span>&gt;</span>
                <span class="list-header-active">高级搜索</span>
            </div>
            <!-- 高级搜索区 -->
            <div class="highSearch-area">
                <p class="highSearch-area-title">搜索结果</p>
                <div class="highSearch-area-main">
                    <form action="">
                        <div class="form-item">
                            <label for="" class="label-name">包含以下任意一个关键词</label>
                            <span class="input-outer"><input type="text" class="input-item" /></span>
                        </div>
                        <div class="form-item">
                            <label for="" class="label-name">包含以下全部关键词</label>
                            <span class="input-outer"><input type="text" class="input-item" /></span>
                        </div>
                        <div class="form-item">
                            <label for="" class="label-name">不包含以下关键词</label>
                            <span class="input-outer"><input type="text" class="input-item" /></span>
                        </div>
                        <div class="form-item">
                            <label for="" class="label-name">完整不拆分关键词</label>
                            <span class="input-outer"><input type="text" class="input-item" /></span>
                        </div>
                        <div class="form-item">
                            <label for="" class="label-name">栏目</label>
                            <!-- 下拉框 -->
                            <span class="input-outer select-menu">
                                <div class="select-menu-div">
                                    <input readonly class="select-menu-input" />
                                    <i><img src="src/images/xiala.png" alt=""></i>
                                </div>
                                <ul class="select-menu-ul" >
                                    <li class="select-this">请选择</li>
                                    <li>栏目一</li>
                                    <li>栏目二</li>
                                    <li>栏目三</li>
                                    <li>栏目四</li>
                                </ul>
                            </span>
                        </div>
                        <div class="form-item">
                            <label for="" class="label-name">时间段选择</label>
                            <!-- 时间段 -->
                            <span class="input-outer">
                                <input type="text" readonly value="" id="date01" class="input-date02">
                                <span class="date-line"></span>
                                <input type="text" readonly value="" id="date02" class="input-date02">
                            </span>
                        </div>
                        <div class="form-item">
                            <label for="" class="label-name">搜索位置</label>
                            <!-- 单选按钮 -->
                            <span class="input-outer radio-outer">
                                <span class="radio-item">
                                    <input type="radio" name="radio-btn" /><span>网页任意位置</span>
                                </span>
                                <span class="radio-item">
                                    <input type="radio" name="radio-btn" /><span>标题中</span>
                                </span>
                                <span class="radio-item">
                                    <input type="radio" name="radio-btn" /><span>正文中</span>
                                </span>
                            </span>
                        </div>
                        <div class="form-item">
                            <label for="" class="label-name"></label>
                            <div class="input-outer">
                                <button class="btn-search btn">查询</button>
                                <button class="btn-reset btn">重置</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>

    <!-- 单选多选框 -->
    <script src="src/js/prefixfree.min.js"></script>
    <!-- 日期 -->
    <script src="src/js/foundation-datepicker.js"></script>
    <script src="src/js/locales/foundation-datepicker.zh-CN.js"></script>
    <script>
        //下拉框 
        $(function(){
            selectMenu(0);
            function selectMenu(index){
               $(".select-menu-input").eq(index).val($(".select-this").eq(index).html());//在输入框中自动填充第一个选项的值

               $(".select-menu-div").eq(index).on("click",function(e){
                  e.stopPropagation();
                 if($(".select-menu-ul").eq(index).css("display")==="block"){
                     $(".select-menu-ul").eq(index).hide();
                     $(".select-menu-div").eq(index).find("i").removeClass("select-menu-i");
                     $(".select-menu-ul").eq(index).animate({marginTop:"50px",opacity:"0"},"fast");
                 }else{
                     $(".select-menu-ul").eq(index).show();
                     $(".select-menu-div").eq(index).find("i").addClass("select-menu-i");
                     $(".select-menu-ul").eq(index).animate({marginTop:"5px",opacity:"1"},"fast");
                 }
                 for(var i=0;i<$(".select-menu-ul").length;i++){
                      if(i!==index&& $(".select-menu-ul").eq(i).css("display")==="block"){
                            $(".select-menu-ul").eq(i).hide();
                            $(".select-menu-div").eq(i).find("i").removeClass("select-menu-i");
                            $(".select-menu-ul").eq(i).animate({marginTop:"50px",opacity:"0"},"fast");
                      }
                 }
               });
               $(".select-menu-ul").eq(index).on("click","li",function(){//给下拉选项绑定点击事件
                   $(".select-menu-input").eq(index).val($(this).html());//把被点击的选项的值填入输入框中
                   $(".select-menu-div").eq(index).click();
                   $(this).siblings(".select-this").removeClass("select-this");
                   $(this).addClass("select-this");
               });

             $("body").on("click",function(event){
                  event.stopPropagation();
                  if($(".select-menu-ul").eq(index).css("display")==="block"){
                        console.log(1);
                      $(".select-menu-ul").eq(index).hide();
                         $(".select-menu-div").eq(index).find("i").removeClass("select-menu-i");
                         $(".select-menu-ul").eq(index).animate({marginTop:"50px",opacity:"0"},"fast");
                     
                 }

             });

            }
        }) 
         //时间
         $('#date01').fdatepicker({
            format: 'yyyy/mm/dd'
        });
        $('#date02').fdatepicker({
            format: 'yyyy/mm/dd'
        });

        // 单选多选框
            $('input[name="radio-btn"]').wrap('<div class="radio-btn"><i></i></div>');
            $(".radio-btn").on('click', function () {
                var _this = $(this),
                    block = _this.parent().parent();
                block.find('input:radio').attr('checked', false);
                block.find(".radio-btn").removeClass('checkedRadio');
                _this.addClass('checkedRadio');
                _this.find('input:radio').attr('checked', true);
            });
            $('input[name="check-box"]').wrap('<div class="check-box"><i><img src="src/images/check_mark.png"></i></div>');
            $.fn.toggleCheckbox = function () {
                this.attr('checked', !this.attr('checked'));
            }
            $('.check-box').on('click', function () {
                $(this).find(':checkbox').toggleCheckbox();
                $(this).toggleClass('checkedBox');
            });
    </script>
</body>
</html>